import formatRichText from '@/utils/dealWithTextImg'
import { useEffect, useState } from 'react'
import styles from './index.module.less'

export default function (props) {
    const { visible = false, content, onCancel, onOk } = props

    // 控制 class 来触发动画效果
    const [showAnimation, setShowAnimation] = useState(false)
    // Modal打开前，body的滚动高度
    const [bodyScrollTop, setBodyScrollTop] = useState(0)

    useEffect(() => {
        visible && setShowAnimation(true)
        // 处理滚动穿透
        if (visible) {
            setBodyScrollTop(document.body.scrollTop || document.documentElement.scrollTop)
            document.body.style.position = 'fixed'
        } else {
            document.body.style.position = ''
            document.body.scrollTop = bodyScrollTop
        }
    }, [visible])

    return (
        visible && (
            <div
                className={styles.mask}
                onClick={() => {
                    setShowAnimation(false)
                    onCancel()
                }}
            >
                <div
                    className={showAnimation ? styles.modal : ''}
                    onClick={e => {
                        e.stopPropagation()
                    }}
                >
                    <div className={styles.icon} />
                    <div className={styles.title}>测评说明</div>
                    <div
                        className={styles.content}
                        dangerouslySetInnerHTML={{
                            __html: formatRichText(content),
                        }}
                    >
                        {/* 请选出下列选项中对你来说最真实的倾向。请注意，这里的所有选择没有“对”与“错”之分，并且每一个问题都只有A和B两种选择。请仔细阅读题目，但不要在某一道题上花额外多的时间，如果当时不清楚的话，可以先跳过去，呆会儿再回过头来做。请尽可能地答完所有问题。请把你的答案写到答题纸上。 */}
                    </div>
                    <div className={styles.operate} onClick={onOk}>
                        好的，去测试
                    </div>
                </div>
            </div>
        )
    )
}
